<template>
	<view>
        <view>
            <u-overlay :show="showImg" >
                <view class="warp br08">
                    <u--image width="100%" height="100%" radius="8" showMenuByLongpress :src="canvasImg" showLoading lazyLoad mode="widthFix"></u--image>
                    <view class="wlkflex justify-around mt20">
                        <view class="canvas-btn">
                            <u-button @click="showImg=false" :customStyle="{color:'#999'}" color="#FFFFFF" shape="circle" text="取消"></u-button>
                        </view>
                        <view class="canvas-btn">
                            <u-button :color="themeColor" shape="circle" text="保存图片" @click="saveImg"></u-button>
                        </view>
                    </view>
                </view>
            </u-overlay>

            <l-painter ref="painter" hidden useCORS />
        </view>
	</view>
</template>

<script>
    import { saveTempFilePathImg } from '@/wlkutils/tools';
    import { mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor'])
        },
		name:"wlk-canvas",
		data() {
			return {
                poster: {
                    css: {
                        width: "750rpx",
                        paddingBottom: "40rpx",
                        background: "#fff",
                        borderRadius: "16rpx",

                    },
                    views:[]
                },
                avatar:{
			        src:'',//头像
                    type:'image',
			        css:{
                        background: "#fff",
                        objectFit: "cover",
                        marginLeft: "40rpx",
                        marginTop: "40rpx",
                        width: "85rpx",
                        boxSizing: "border-box",
                        height: "85rpx",
                        borderRadius: "50%"
                    }
                },
                avatarInfo:{
                    type: "view",
			        css:{
                        marginTop: "40rpx",
                        paddingLeft: "20rpx",
                        display: "inline-block"
                    },
                    views: [
                        {
                            text: "",//会员昵称
                            type: "text",
                            css: {
                                display: "block",
                                paddingBottom: "10rpx",
                                color: "#333",
                                fontSize: "32rpx",
                                fontWeight: "bold"
                            }
                        },
                        {
                            text: "为你推荐了一个线路",
                            type: "text",
                            css: {
                                color: "#333",
                                fontSize: "24rpx",
                            },
                        }
                    ],
                },
                lineInfo:{
                    type: "view",
                    css: {
                        marginLeft: "40rpx",
                        marginTop: "30rpx",

                        boxSizing: "border-box",
                        background: "#fff",
                        borderRadius: "16rpx",
                        width: "670rpx",
                        boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
                    },
                    views:[
                        {
                            src: "",//线路图片
                            type: "image",
                            css: {
                                objectFit: "cover",
                                objectPosition: "50% 50%",
                                width: "670rpx",
                                height: "670rpx",
                                borderRadius: "16rpx 16rpx 0 0",
                            },
                        }, {
                            type: "view",
                            css: {
                                marginTop: "32rpx",
                                color: "#FAC033",
                                fontWeight: "bold",
                                fontSize: "28rpx",
                                lineHeight: "1em",
                                padding: "0 32rpx",
                            },
                            views: [{
                                text: "￥",
                                type: "text",
                                css: {
                                    verticalAlign: "bottom",
                                    fontSize: "40rpx"
                                },
                            }, {
                                text: "",
                                type: "text",
                                css: {
                                    verticalAlign: "bottom",
                                    fontSize: "58rpx"
                                },
                            },  {
                                text: "起",
                                type: "text",
                                css: {
                                    verticalAlign: "bottom",
                                    paddingLeft: "10rpx",
                                    fontWeight: "normal",
                                    fontSize: "40rpx"
                                }
                            }],

                        }, {
                            css: {
                                marginTop: "32rpx",
                                fontSize: "26rpx",
                                color: "#8c5400",
                              padding: "0 32rpx",
                            },
                            type: "view",
                            views: [],//线路属性
                        }, {
                            css: {
                              marginTop: "30rpx",
                              padding: "0 32rpx 32rpx 32rpx",
                              display: "flex",
                              justifyContent: "space-between",
                            },
                            type: "view",
                            views: [
                                {
                                    text: "",//线路标题
                                    type: "text",
                                    css: {
                                        paddingRight: "32rpx",
                                        boxSizing: "border-box",
                                        lineClamp: 2,
                                        color: "#333333",
                                        lineHeight: "1.8em",
                                        fontSize: "32rpx",
                                        width: "458rpx"
                                    },
                                }],

                        }
                    ]
                },
                ticketInfo:{
                    type: "view",
                    css: {
                      marginLeft: "40rpx",
                      marginTop: "30rpx",
                      boxSizing: "border-box",
                      background: "#fff",
                      borderRadius: "16rpx",
                      width: "670rpx",
                      boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)",
                    },
                    views:[
                      {
                        type: "view",
                        css:{
                          position: "relative"
                        },
                       views:[
                         {
                           src: "",//景点图片
                           type: "image",
                           css: {
                             objectFit: "cover",
                             objectPosition: "50% 50%",
                             width: "670rpx",
                             height: "670rpx",
                             borderRadius: "16rpx 16rpx 0 0",
                           },
                         }, {
                           css: {
                             position: "absolute",
                             bottom: "32rpx",
                             left: "32rpx",
                           },
                           type: "view",
                           views: [
                             {
                               text: "",//景点等级
                               type:"text",
                               css:{
                                 padding: "3px 10px",
                                 borderRadius: "12px",
                                 background: "rgba(0, 0, 0, 0.4)",
                                 color: "#fff",
                                 fontSize: "26rpx",
                               }
                             }
                           ],
                         }
                       ]
                      }, {
                        css: {
                          marginTop: "32rpx",
                          fontSize: "26rpx",
                          color: "#8c5400",
                          padding: "0 32rpx",
                        },
                        type: "view",
                        views: [],//景点标签
                      }, {
                        css: {
                          marginTop: "30rpx",
                          padding: "0 32rpx 32rpx 32rpx",
                          display: "flex",
                          justifyContent: "space-between",
                        },
                        type: "view",
                        views: [
                          {
                            text: "",//景点标题
                            type: "text",
                            css: {
                              paddingRight: "32rpx",
                              boxSizing: "border-box",
                              lineClamp: 2,
                              color: "#333333",
                              lineHeight: "1.8em",
                              fontSize: "32rpx",
                              width: "458rpx"
                            },
                          }],

                      }
                    ]
                },
                canvasImg:'',
                showImg:false
			};
		},
        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return {}
                }
            },
            mode:{
                type:String,
                default:''
            },
            qrcode:{
                type:String,
                default:''
            },
        },
        watch: {
            qrcode(val){
                let obj = new Object();
                // #ifndef MP
                obj.text = val;
                obj.type = 'qrcode';
                // #endif
                // #ifdef MP
                obj.type = 'image';
                obj.src = val;
                // #endif
                obj.css ={
                    width: "140rpx",
                    height: "140rpx",
                };
                if(this.mode=='line'){
                  this.lineInfo.views[3].views[1] = obj;
                }else if(this.mode=='ticket'){
                  this.ticketInfo.views[2].views[1] = obj;
                }

            },
            item(val) {
                var that = this;
              if(this.mode=='line'){
                this.lineInfo.views[0].src = val.images[0].poster?val.images[1].url:val.images[0];
                this.lineInfo.views[1].views[1].text = val.minprice;
                this.lineInfo.views[3].views[0].text = val.title;
                val.tagids.forEach(function (v,k) {
                  if(k<3){
                    let obj = new Object();
                    obj.text = v.name;
                    obj.type = 'text';
                    obj.css  = {
                      marginRight: "16rpx",
                      background: "#fff4d9",
                      padding:'2rpx 10rpx',
                      borderRadius:'3rpx'
                    };
                    that.lineInfo.views[2].views[k] = obj;
                  }
                });
              }else if(this.mode=='ticket'){
                console.log(val.level_id)
                this.ticketInfo.views[0].views[0].src = val.images[0].poster?val.images[1].url:val.images[0];
                this.ticketInfo.views[0].views[1].views[0].text = val.level_id+'景区';
                this.ticketInfo.views[2].views[0].text = val.title;
                val.tags.forEach(function (v,k) {
                  if(k<3){
                    let obj = new Object();
                    obj.text = v;
                    obj.type = 'text';
                    obj.css  = {
                      marginRight: "16rpx",
                      background: "#fff4d9",
                      padding:'2rpx 10rpx',
                      borderRadius:'3rpx'
                    };
                    that.ticketInfo.views[1].views[k] = obj;
                  }
                });
              }

            },
        },
        methods:{
            canvas(){
                var that = this;
                this.$store.commit("setLoadingShow", true);
                this.avatar.src = this.userInfo.avatar?this.userInfo.avatar:'';
                this.avatarInfo.views[0].text = this.userInfo.nickname;

                this.poster.views[0] = this.avatar;
                this.poster.views[1] = this.avatarInfo;
                if(this.mode == 'line'){
                  this.poster.views[2] = this.lineInfo;
                }else if(this.mode == 'ticket'){
                  this.avatarInfo.views[1].text = '为你推荐了一个景点';
                  this.poster.views[2] = this.ticketInfo;
                }

                // 渲染
                this.$refs.painter.render(this.poster);
                // 生成图片
                let pathType = 'url';
                // #ifdef H5
                pathType = 'base64';
                // #endif
                this.$refs.painter.canvasToTempFilePathSync({
                    fileType: "jpg",
                    // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
                    pathType: pathType,
                    quality: 1,
                    success: (res) => {
                        that.canvasImg = res.tempFilePath;
                        that.showImg = true;
                        that.$store.commit("setLoadingShow", false);
                    }
                });
            },
            saveImg(){
                saveTempFilePathImg(this.canvasImg);
            }
        }
	}
</script>

<style lang="scss">
    .warp{
        margin: 0 auto;
        margin-top: 130rpx;
        width: 90%;
        overflow: hidden;
        image{
            width: 100%;
            border-radius: 8px;
        }
        .canvas-btn{
            width: 35%;
        }
    }
</style>